<template>
  <div class="menu">
    <div class="top">
      <img
        src="../assets/icon/308top.png"
        class="top_left"
        @click="returnPage"
        alt=""
      />

      <div class="top_right">
        <el-row class="block-col-2">
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img
                  src="../assets/icon/215more.png"
                  class="top_right"
                  alt=""
                />
              </span>
              <el-dropdown-menu slot="dropdown" @command="handleCommand">
                <el-dropdown-item icon="el-icon-s-home" command="a">首页</el-dropdown-item>
                <el-dropdown-item icon="el-icon-shopping-bag-2"
                 command="b">商品</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-shopping-cart-2"
                   command="c">购物车</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-chat-dot-square"
                  command="d" >客服</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>

      <h3>店铺详情</h3>
    </div>
    <div class="type">
      <div class="type_logo"></div>
      <div>阿道夫官方旗舰店 </div>
      <div class="grade">店铺星级
          <el-rate
  v-model="value"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate>
      </div>
<div class="more"></div>

      <!-- 评价 -->
    <div class="sign">
      <div class="sign_cneter">
        <div class="sign_cneter_word" v-for="item in word" :key="item.text">
 <p class="text">{{item.text}}</p>
 <p class="number">{{item.number}}</p>
 <p class="lessword">{{item.lessword}}</p>
        </div>
      </div>
    </div>
<div class="more"></div>
<div class="more"></div>

<!-- 联系客服 -->
<div class="contact">
  
<div class="touch" v-for="items in message" :key="items.name"><p>{{items.name}}</p>
 <img :src="items.image" alt="">
</div>

<div class="more"></div>


<div class="contact">
 
  <div class="touch" v-for="induct in shopmessage" :key="induct.duct"><p>{{induct.duct}}</p> <p>{{induct.introduce}}</p></div>

</div>

</div>

    </div>
  </div>
</template>
<script>
import Brand from '../components/Brand.vue'

export default {
  name:"Menu",
  component:Brand,
  data() {
    return {
        value: 3.5,
        word:[{
          text:"评价",
          number:9.7,
          lessword:"中"
        },
        {
          text:"物流",
          number:8.91,
          lessword:"中"
        },{
          text:"售后",
          number:8.75,
          lessword:"低"
        }],
        message:[{
   name:"联系客服",
    image:require("../assets/icon/208聊天、对话-线性.png")
        },
        {
   name:"证件信息",
    image:require("../assets/icon/namecard.png")
    
        }],
        shopmessage:[
          {duct:"店铺简介",
            introduce:"京东品牌旗舰店 正品保证 售后服务"
          },
            {duct:"开店时间",
            introduce:"2017年04月28日"
          }
        ]
    };
  },

  methods: {
     handleCommand(command) {
        this.$message('click on item ' + command);
      

    },
    returnPage() {
      // 跳转上一级
      // 这个判断用来解决这种情况，当用户没有上一条路由的历史记录，出现点击返回按钮没有反应时，下面的代码用来判断有没有上一条路由的历史记录   如果没有则返回首页
      if (window.history.length <= 1) {
        this.$router.push({ path: "/zh-CN/home" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.menu{
  background-color: rgb(236, 236, 236);
  width: 100%;
  height: 665px;
}
.more{
  width: 100%;
  height: 30px;
  float: left;
  background-color: rgb(236, 236, 236) ;
}
.grade{
  float: left;
  font-size: 10px;
  font-weight: 700;
  color: gray;
}
.sign{
  width: 100%;
  height: 4 0px;
  float: left;
  background-color: white;
}
.sign_cneter{
  float: left;
  width: 100%;
  height: 40px;
  // margin-top: 20px;

  // background-color: yellowgreen;
}
.sign_cneter_word{
  width: 31%;
  height: 40px;
  margin-left: 2%;
  // background-color: red;
  float: left;
  border-left: 1px solid gray;
}
.top {
  width: 100%;
  height: 40px;
  float: left;
  background-color: white;
}
h3 {
  text-align: center;
  margin-top: 10px;
}
.top_left {
  width: 25px;
  height: 25px;
  float: left;
  margin: 13px 7px;
}
.top_right {
  width: 30px;
  height: 30px;
  float: right;
  margin-top: 5px;
}
.type {
  width: 100%;
  height: 100px;
  float: left;
  // background-color: antiquewhite;
  border-top: 1px solid gray;
  background-color: white;
}

.type_logo {
  float: left;
  // background-color: blueviolet;
  background-image: url(../assets/logo/logo002.jpg);
  background-size: 100% 100%;
  width: 58px;
  border-radius: 5px;
  height: 55px;
  margin: 2px 10px;
  // border: 1px solid grey;
}
.text{
  font-size: 13px;
  float: left;
  margin-left: 20px;
  margin-top: 7px;
  font-weight: 600;
  color: grey;

}
.number{
  float: left;
  margin-left: 10px;
  margin-top: 7px;
  color: red;
  font-weight: 700;
  font-size: 15px;
}
.lessword{
  background-color: rgb(221, 199, 158);
  margin-left: 10px;
  color: red;
  border: 1px solid grey;
  border-radius: 100%;
  float: left;
  font-weight: 800;
  font-size: 11px;
  margin-top: 7px;
}
.contact{
  width: 100%;
  height: 100px;
  float: left;
  background-color: white;
}
.touch{
  float: left;
  width: 100%;
  height: 40px;
  border-top: 1px solid rgb(194, 191, 191);
}
.touch p{
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  font-weight: 500;
  color: gray;
  
}
.touch img{
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 70%;
  margin-top: 10px;
}
</style>